<template>
  <div class="main">
    <div class="title"><span class="span">丨</span>预警规则</div><hr>
    <el-button class="button" @click="drawer=true">新增</el-button>
    <el-input class="input"
    placeholder="请输入搜索设备"
    v-model="search"
    :prefix-icon="Search">
    </el-input>
    <el-select placeholder="请选择时间" class="select" v-model="time">
      <el-option value="全部" class="option">全部</el-option>
      <el-option value="白昼" class="option">白昼</el-option>
      <el-option value="夜晚" class="option">夜晚</el-option>
    </el-select>
    <div class="table">
      <el-table :data="filterTableData" stripe height="100%">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="监测设备"></el-table-column>
        <el-table-column prop="time" label="昼夜"></el-table-column>
        <el-table-column prop="thresholdName" label="监测指标"></el-table-column>
        <el-table-column prop="rule" label="预警规则"></el-table-column>
        <el-table-column prop="last" label="持续时间"></el-table-column>
        <el-table-column prop="do" label="操作">
          <template #default="scope">
        <el-button link type="primary"  @click="deleteData(scope.$index)">
          删除
        </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
    v-model="drawer"
    title="新增规则"
  >
  <span>序号</span><el-input v-model="insertData.id"></el-input>
  <span>监测设备</span><el-input v-model="insertData.name"></el-input>
  <span>昼夜</span><el-input v-model="insertData.time"></el-input>
  <span>监测指标</span><el-input v-model="insertData.thresholdName"></el-input>
  <span>预警规则</span><el-input v-model="insertData.rule"></el-input>
  <span>持续时间</span><el-input v-model="insertData.last"></el-input>
  <template #footer>
      <div>
        <el-button type="primary" @click="addData" class="button">增加</el-button>
        <el-button @click="drawer=false" class="button">取消</el-button>
      </div>
    </template>
  </el-drawer>
  
  </div>
  
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import {computed, reactive, ref} from 'vue'
const time =ref('全部')
const search = ref('')
const filterTableData = computed(()=>
   tableData.filter(data=>!search.value||data.name.includes(search.value)
  )
)

const drawer = ref(false)
const insertData = reactive({
  id:'',
  name:'',
  time:'',
  thresholdName:'',
  rule:'',
  last:'',
})
const tableData = reactive(
  [
   {
    id:1,
    name:'设备1',
    time:'白天',
    thresholdName:'温度',
    rule:'大于三十',
    last:'一天',
  },
  {
    id:2,
    name:'设备2',
    time:'黑夜',
    thresholdName:'湿度',
    rule:'小于二十',
    last:'三天',
  },
  {
    id:3,
    name:'设备1',
    time:'白天',
    thresholdName:'温度',
    rule:'大于三十',
    last:'一天',
  },
  ]
  
)

const deleteData=(index)=>{
  tableData.splice(index, 1)
}

const addData = () =>{
  tableData.push({...insertData})
  for(const key in insertData){
    insertData[key]=''
  }
  drawer.value=false
}

</script>

<style scoped>
@import url('./Rule.css');
</style>